@import '~tracim_frontend_lib/src/css/Variable.styl'

.flashmessage
  position fixed
  display flex
  justify-content center
  margin-inline-start calc(50% - 400px)
  z-index 60
  &__container
    margin-top 50px
    border 0
    border-radius standardBorderRadius
    width 800px
    background lightGrey2
    box-shadow shadow-all
    overflow hidden
    &__body
      display flex
    &__header
      border-start-end-radius 10px
      border-start-start-radius 10px
      width 100%
      height 8px
    &__close
      float right
      margin 5px 0 0 0
      &__icon
        padding-inline-end standardSpacing
        cursor pointer
    &__content
      display flex
      align-items center
      margin standardSpacing 0
      flex 1
      &__icon
        padding 0 25px
        font-size bigIconSize
      &__text
        &__title
          font-weight bold
        &__paragraph
          padding-inline-end 20px

.connection_error
  z-index 2000

@media (max-width: max-sm)
  .flashmessage
    margin-inline-start 0px
    width 100%
    &__container
      width 100%

// INFO - GB - 2022-01-27 - The commands below are fallbacks because border-start-end-radius and border-start-start-radius are new
// and have a global usage below 90% according to https://caniuse.com/. When the global usage is higher, we can delete the fallbacks.
.flashmessage__container__header
  border-top-right-radius 10px
  border-top-left-radius 10px
